<!--新增用户界面-->


<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:include="include/admin/adminHeader::html('新增用户')">
</head>

<!--数据校验插件静态资源文件-->
<script src="js/bootstrapValidator.min.js"></script>
<link href="css/bootstrapValidator.min.css" rel="stylesheet">

<style>
    div.container div.row div {
        margin: 5px 0px;
        text-align: center;
    }
</style>


<body>
<div id="workingArea">
    <div class="container">
        <div class="row">
            <!--栅栏布局12列开始-->
            <div class="col-md-12">
                <div th:replace="include/admin/adminNavigator::html"></div>
            </div>

            <!--面包屑导航-->
            <div class="col-md-12 " style="text-align: left">
                <ol class="breadcrumb">
                    <li><a href="/home">个人中心</a></li>
                    <li>新增用户</li>
                </ol>
            </div>
            <!--栅栏布局3列-->
            <div class="col-sm-3 col-xs-3">
            <div th:replace="include/admin/adminLeftMenu::html"></div>
            </div>
            <!--栅栏布局9列开始-->
            <div class="col-md-9 col-sm-9 col-xs-9 ">
                <div class="col-sm-12 col-xs-12" >
                    <form class="form-horizontal" role="form">
                        <div class="form-group">
                            <label class="col-sm-4 control-label">用户名：</label>
                            <div class="col-sm-6">
                                <input name="username" class="form-control" @keyup="check(bean.name)"  v-model="bean.name"/>
                                <span v-if="is_have_name">用户名已存在</span>
                                <span v-else></span>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-4 control-label">密码：</label>
                            <div class="col-sm-6">
                                <input name="password" class="form-control" v-model="bean.password"/>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-4 control-label">手机号：</label>
                            <div class="col-sm-6">
                                <input placeholder="选填" name="phone" class="form-control" v-model="bean.phone"/>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-4 control-label">姓名：</label>
                            <div class="col-sm-6">
                                <input placeholder="选填" name="name" class="form-control" v-model="bean.realname"/>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-4 control-label">角色：</label>
                            <div class="col-sm-6">
                                <!--<input  class="form-control" disabled="disabled" v-model="bean.role" />-->
                                <select name="role" class="form-control" v-model="bean.role">
                                    <option selected="selected" value="" disabled="disabled">请选择一个角色</option>
                                    <option>管理员</option>
                                    <option>新闻投稿员</option>
                                    <option>新闻审核员</option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <button type="submit" class="btn btn-primary" @click="add">增加</button>
                            <!--<button type="submit" class="btn btn-primary" >增加</button>-->
                        </div>
                    </form>

                </div>
            </div>
            <!--栅栏布局9列结束-->
        </div>
    </div>
</div>


<!--前后端交互-->
<script>
    $(function () {
        /*文档加载开始*/

        var data4Vue = {
            uri: "user",
            bean: {id: "", name: "", password: "", realname: "", phone: "", role: ""},
            is_have_name: false
        };

        //ViewModel
        var vue = new Vue({
            el: '#workingArea',
            data: data4Vue,
            methods: {
                add: function () {
                    /*bootstrap提交验证*/
                    var validator= $('form').data('bootstrapValidator').validate();
                    if(!validator.isValid()){
                        //没有通过校验
                        return;
                    } else {
                        //通过校验，可进行提交等操作
                    }
                    var url = this.uri;
                    var formData = new FormData();
                    formData.append("name", this.bean.name);
                    formData.append("password", this.bean.password);
                    formData.append("realname", this.bean.realname);
                    formData.append("phone", this.bean.phone);
                    formData.append("role", this.bean.role);
                    axios.post(url, formData).then(function (response) {
                        console.log(response.data);
                        if (response.data.code != 0) {
                            alert("增加失败");
                        } else {
                            alert("增加成功");
                            vue.bean = {id: "", name: "", password: "", realname: "", phone: "", role: ""};
                        }
                    });
                },
                logout: function () {
                    var url = "logout";
                    axios.post(url).then(function (response) {
                        console.log(response.data);
                        if (response.data.code == 0) location.href = "fore_login";
                    });
                },
                //                校验用户名是否存在，设置判断结果is_have_name
                check: function (bean_name) {
                    var url =  "userbyname/" + bean_name;
//                    alert(url);
                    axios.get(url).then(function (response) {
                        console.log(response);
                        if (response.data.code) {
                            /*用户名不存在*/
                            vue.is_have_name = false;
                        }
                        else {
                            /*用户名已存在*/
                            vue.is_have_name = true;
                        }
                    })
                }
            }
        });


    });
</script>

<!--表单校验-->
<script>
    $(function () {
        $('form').bootstrapValidator({
            message: 'This value is not valid',
            feedbackIcons: {
                /*icon样式问题*/
//                valid: 'glyphicon glyphicon-ok',
//                invalid: 'glyphicon glyphicon-remove',
//                validating: 'glyphicon glyphicon-refresh'
            },
            fields: {
                username: {
                    message: '用户名验证失败',
                    validators: {
                        notEmpty: {
                            message: '用户名不能为空'
                        },

                    }
                },
                password: {
                    validators: {
                        notEmpty: {
                            message: '密码不能为空'
                        },
                        stringLength: {
                            min: 6,
                            max: 18,
                            message: '密码长度必须在6到18位之间'
                        },
                        regexp: {
                            regexp: /^[a-zA-Z0-9_]+$/,
                            message: '密码只能包含大写、小写、数字和下划线'
                        }
                    }
                },
                phone: {
                    validators: {
                        regexp: {
                            /*手机号1开头，第二位34578 然后11位*/
                            regexp: /^1[3|4|5|7|8][0-9]{9}$/,
                            message: '请输入正确的11位手机号码'
                        }
                    }
                },
                name: {
                    validators: {
                        regexp: {
                            /*中文 2-7位*/
                            regexp: /^([\u4e00-\u9fa5]){2,7}$/,
                            message: '请输入正确的姓名'
                        }
                    }

                },
                role: {
                    message: '角色验证失败',
                    validators: {
                        notEmpty: {
                            message: '角色不能为空'
                        },
                        callback: {
                            callback: function (value, validator) {

                                if (value == -1) {
                                    return false;
                                } else {
                                    return true;
                                }

                            }
                        }
                    }
                }
            },
            submitHandler: function (validator, form, submitButton) {
                alert("submit");
            }
        });
    });
</script>
</body>
</html>